<template>
  <div>
    <v-top></v-top>
    
    <div class="querendingdan">
      <div class="top" v-if="addressInfo.id">
        <div class="box">
          <p class="p2"> {{addressInfo.username}}{{addressInfo.userphone}}</p>
          <p class="p3">{{addressInfo.location}}</p>
          <p class="p3">{{addressInfo.useraddress}}</p>
        </div>
      </div>
      <div class="boxx btnn1" v-else>
        <button  class="btnn2"  @click="$router.push('/addressList')">地址列表</button>
      </div>
      
      <van-swipe-cell  v-for="item in list" :key="item.id">
      <van-card
        :num="item.num"
        :price="item.price"
        desc="描述信息"
        :title="item.goodsname"
        class="goods-card"
        :thumb="$pre+item.img"
      />
    </van-swipe-cell>
      <div class="kongbai"></div>
      <div class="neirong">
        <p class="p4">
          <span>发票类型</span>
          <span>不开发票＞</span>
        </p>
        <p class="p4">
          <span>售后免邮</span>
          <span>部分商家赠送</span>
        </p>
        <p class="p4">
          <span>买家留言</span>
          <span>填写内容需要与商家协商并确认，45字以内</span>
        </p>
        <br />
        <p class="p4">
          <span>优惠券</span>
          <span>暂无可用</span>
        </p>
      </div>
    </div>
    <van-submit-bar :price="countmoney?countmoney*100:Number(0)" button-text="提交订单" @submit="toOrder" />
  </div>
</template>

<script>
import { reqAddressList, reqOrderAdd, reqShopList } from '../../http/api';
export default {
  data(){
    return {
      //1地址详情
      addressInfo:{},
      //3.购物车
      list:[],
      countmoney:''
    }
  },
  mounted(){
    //2.如果有地址，就取地址,赋值
    if(this.list!=null){
      let json=JSON.parse(localStorage.getItem("order"))
    this.countmoney=json.countmoney
    }else{
       this.countmoney=''
    }
    
    if(this.$route.query.addressId){
      reqAddressList({
        uid:JSON.parse(localStorage.getItem("user")).uid,
        id:this.$route.query.addressId,
      }).then((res)=>{
        this.addressInfo=res.data.list?res.data.list[0]:{};
      });
    }
    //5.请求购物车的数据
    let idstr =JSON.parse(localStorage.getItem("order")).idstr;//'15,16'
    idstr.split(",").forEach((item)=>{
      reqShopList({
        uid:JSON.parse(localStorage.getItem("user")).uid,
        id:item,
      }).then((res)=>{
        this.list.push(res.data.list?res.data.list[0]:{})
        // console.log(this.list);
      })
    })
  },
  methods:{
    //6.确认订单
    toOrder(){
      let json=JSON.parse(localStorage.getItem("order"))
      //生成订单
      reqOrderAdd({
        uid:JSON.parse(localStorage.getItem("user")).uid,
        addressId:this.$route.query.addressId,
        ...json
      }).then(res=>{
        this.$router.push("/pay?orderId="+res.data.list.outTradeNo)
      })
    }
  }
};
</script>

<style scoped>
.querendingdan {
  margin: 0 auto;
}
.top {
  height: 2.2rem;
  background: linear-gradient(to bottom, #ff6040, #ff887c);
  box-shadow: 0 0.05rem 0.05rem #ff887c;
}
.top .p1 {
  line-height: 0.8rem;
  text-align: center;
  font-size: 0.3rem;
  color: white;
}
.top .box {
  width: 90%;
  height: 1.8rem;
  margin: 0 auto;
  background-color: white;
  border-radius: 5px;
}
.top .p2 {
  font-weight: bold;
  font-size: 0.3rem;
  margin: 0.2rem 0.4rem;
  line-height: 0.3rem;
}
.top .p3 {
  font-size: 0.25rem;
  margin: 0.2rem 0.4rem;
  color: #9e9e9e;
  line-height: 0.3rem;
}
.box {
  padding-top: 0.2rem;
  position: relative;
  z-index: 2;
}
.kongbai {
  height: 0.7rem;
  background-color: #f2ebea;
}
.neirong {
  width: 90%;
  margin: auto;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.box1 img {
  width: 0.32rem;
  height: 0.32rem;
  vertical-align: middle;
  float: left;
  margin-right: 0.2rem;
}
.box1 {
  margin: 0.4rem 0;
}
.box1 span:nth-child(2) {
  font-size: 0.3rem;
  font-weight: bold;
  float: left;
}
.box1 span:nth-child(3) {
  font-size: 0.2rem;
  font-weight: bold;
  float: right;
  color: orangered;
  margin-left: 0.2rem;
}
.box1 span:nth-child(4) {
  font-size: 0.2rem;
  font-weight: bold;
  float: right;
}
.box1 span:nth-child(5) {
  font-size: 0.2rem;
  font-weight: bold;
  float: right;
  margin-right: 0.2rem;
}
.box2 img {
  width: 2.16rem;
  height: 2.16rem;
  float: left;
  margin-right: 10px;
}
.box2 div {
  height: 2.16rem;
}
.box3 {
  width: 4.4rem;
  float: left;
}
.box3 p:nth-child(1) {
  width: 4.6rem;
  font-size: 0.3rem;
  letter-spacing: 1px;
  line-height: 0.4rem;
}
.box3 p:nth-child(2) {
  font-size: 0.35rem;
  color: orangered;
  margin: 0.3rem 0;
}
.box3 p:nth-child(2) span:nth-child(1) {
  font-size: 0.16rem;
  color: orangered;
}
.box3 p:nth-child(2) span:nth-child(2) {
  float: right;
}
.box3 span:nth-child(3) {
  width: 1.4rem;
  height: 0.32rem;
  font-size: 0.2rem;
  display: block;
  background-color: orangered;
  float: left;
  line-height: 0.32rem;
}
.box3 span:nth-child(4) {
  width: 0.52rem;
  height: 0.32rem;
  font-size: 0.2rem;
  display: block;
  background-color: orangered;
  float: left;
  line-height: 0.32rem;
  margin-left: 10px;
}
.p4 {
  height: 0.6rem;
  line-height: 0.6rem;
  display: block;
  display: flex;
  justify-content: space-between;
}
.p4 span:nth-child(1) {
  font-weight: bold;
}
.p4 span:nth-child(2) {
  color: #9e9e9e;
}
.neirong .p4 .span200 {
  color: orangered;
}
.end {
  border: 1px solid #ccc;
}
.end div {
  float: left;
}
.end div:nth-child(1) {
  margin: 0 0.4rem 0 0.2rem;
}
.end div:nth-child(1) p:nth-child(1) {
  font-size: 0.3rem;
  font-weight: bold;
  margin-top: 0.2rem;
}
.end div:nth-child(1) span:nth-child(2) {
  color: #9e9e9e;
}
.end div:nth-child(2) p:nth-child(1) {
  font-size: 0.3rem;
  font-weight: bold;
  color: orangered;
  margin-top: 0.2rem;
}
.end div:nth-child(2) span:nth-child(2) {
  color: #9e9e9e;
}
.inp {
  background-color: orangered;
  color: white;
  width: 2.2rem;
  height: 1rem;
  font-size: 0.33rem;
  font-weight: bold;
  line-height: 1rem;
  float: right;
}
.spanend {
  display: block;
  width: 2.7rem;
  height: 0.1rem;
  background-color: black;
  border-radius: 5px;
  margin: 5px auto;
  float: right;
}
.boxx {
  background: white;
  border-radius: 5px;
  height: 2rem;
  width: 90%;
  margin: auto;
}
.btnn1 {
  position: relative;
}
.btnn2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.3rem;
  color: orange;
  padding: 0.3rem;
  border: 1px solid orange;
  border-radius: 5px;
  background: rgb(224, 220, 212);
}
</style>